<template>
  <div>
    <div class="mapTest">
      <div id="map1"></div>
    </div>
  </div>
</template>

<script>
import path from'path'
import L from 'leaflet'
import 'leaflet-draw';
import 'proj4leaflet'
import 'leaflet.chinatmsproviders';
const IMAGE_PATH = '/static/images'
L.Icon.Default.imagePath = IMAGE_PATH + '/'
const MARKER_ICON_URL = path.join(IMAGE_PATH, 'marker-icon-2x.png')
const MARKER_SHADOW_URL = path.join(IMAGE_PATH, 'marker-shadow.png')

export default {
  name: 'LeafletDemo',
  components: {
  },
  data() {
    return {
      map: null,
      url: "",
      attr: "",
    }
  },
  mounted() {
    //MIERUNE Color読み込み
    let m_color = new L.tileLayer('https://tile.mierune.co.jp/mierune/{z}/{x}/{y}.png', {
      attribution: "Maptiles by <a href='http://mierune.co.jp/' target='_blank'>MIERUNE</a>, under CC BY. Data by <a href='http://osm.org/copyright' target='_blank'>OpenStreetMap</a> contributors, under ODbL."
    });

    // ArcGIS 卫星地图
    let arcgis_satellite = new L.tileLayer('https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}');

    // Google earth
    let google_satellite = new L.tileLayer('http://localhost/WeServer/wmts/1.0.0/acimage/default/mercator/{z}/{y}/{x}.jpg',{
      maxZoom: 9
    });

    // 高德地图
    let autonavi_satellite = L.tileLayer.chinaProvider(
        'GaoDe.Satellite.Map',
        {
          maxZoom:18,
          minZoom:5,
        }
    );

    // OpenStreetMap
    let osm_normal = L.tileLayer.chinaProvider(
        'OSM.Normal.Map',
        {
          maxZoom:18,
          minZoom:5,
        }
    );

    // 经纬度设定
    const lat = 36.0737;
    const lng = 120.4250;
    const defaultCenter = [lat, lng];
    const defaultZoom = 15;

    // 创建地图
    let map = L.map('map1', {
      center: defaultCenter,
      zoom: defaultZoom,
      zoomControl: true,
      layers: [arcgis_satellite]
    });

    // 底图图层
    let Map_BaseLayer = {
      "MIERUNE Color": m_color,
      "Google satellite": google_satellite,
      "Autonavi normal": autonavi_satellite,
      "OpenStreatMap normal": osm_normal,
      "ArcGIS satellite": arcgis_satellite
    };
    L.control.layers(
        Map_BaseLayer,
        null
    ).addTo(map);

    // 大小缩放
    L.control.scale({
      imperial: false,
      maxWidth: 300
    }).addTo(map);

    // 添加marker标注
    const marker = L.marker([36.0737, 120.4250]);
    marker.bindPopup("<b>中国电波传播研究所</b><br/>青大一路19号").openPopup();
    marker.addTo(map);

    map.setView(defaultCenter, defaultZoom);

    // Initialise the FeatureGroup to store editable layers
    let editableLayerGroup = new L.FeatureGroup();
    map.addLayer(editableLayerGroup);

    let MyCustomMarker = L.Icon.extend({
      options: {
        shadowUrl: MARKER_SHADOW_URL,
        iconUrl: MARKER_ICON_URL,
        iconSize:     [50, 82], // size of the icon
        shadowSize:   [41, 41], // size of the shadow
        iconAnchor:   [25, 83], // point of the icon which will correspond to marker's location
        shadowAnchor: [14, 40], // the same for the shadow
        popupAnchor:  [0, -68], // point from which the popup should open relative to the iconAnchor
      },
    });
    let options = {
      position: 'topleft',
      draw: {
        polyline: {
          shapeOptions: {
            color: '#f357a1',
            weight: 10
          }
        },
        polygon: {
          allowIntersection: false, // Restricts shapes to simple polygons
          drawError: {
            color: '#e1e100', // Color the shape will turn when intersects
            message: '<strong>Oh snap!<strong> you can\'t draw that!' // Message that will show when intersect
          },
          shapeOptions: {
            color: '#bada55'
          }
        },
        circle: false, // Turns off this drawing tool
        rectangle: {
          shapeOptions: {
            clickable: false
          }
        },
        marker: {
          icon: new MyCustomMarker()
        }
      },
      edit: {
        featureGroup: editableLayerGroup, //REQUIRED!!
        remove: false
      }
    };
    // Initialise the draw control and pass it the FeatureGroup of editable layers
    let drawControl = new L.Control.Draw(options);
    map.addControl(drawControl);
    map.on(L.Draw.Event.CREATED, function (e) {
      const type = e.layerType;
      const layer = e.layer;
      if (type === L.Draw.Marker.TYPE) {
        layer.bindPopup('临时marker');
      } else if (type === L.Draw.CircleMarker.TYPE) {
        layer.bindPopup('临时圈注点');
      }
      editableLayerGroup.addLayer(layer);
    });

    this.map = map;
  }
}
</script>

<style lang="stylus" scoped>
@import 'leaflet/dist/leaflet.css'
@import "leaflet-draw/dist/leaflet.draw.css"

.mapTest
  border: 1px solid black
  text-align: left
  #map1
    height: 550px
    width: 100%
</style>
